<template>
  <div id="app">
    <!--    <img src="./assets/logo.png">  v-if="isRouterAlive"-->
    <!--    <transition>-->
    <transition>
      <keep-alive>
        <loading v-if="isShowLoading"></loading>
        <no-network v-else-if="responseErrorStatus"></no-network>
        <router-view v-else/>
      </keep-alive>
    </transition>

<!--    <portal-target name="destination" multiple>-->
<!--      hello i am destination1-->
<!--    </portal-target>-->
<!--    <portal-target name="destination1" multiple>-->
<!--      hello i am destination2-->
<!--    </portal-target>-->
<!--    <portal-target name="destination2" slim>-->
<!--    </portal-target>-->
<!--    <portal-target-->
<!--      name="destination3"-->
<!--      :slot-props="test"-->
<!--    />-->
<!--    <portal-target-->
<!--      name="destination4"-->
<!--      :slotScope="{ message: 'Hi!' }"-->
<!--    >-->
<!--      <p slot-scope="props">-->
<!--        {{props.message}} This is rendered when no other content is available.-->
<!--      </p>-->
<!--    </portal-target>-->
<!--    <portal-target-->
<!--      name="destination5"-->
<!--      :slot-props="{state: 'disabled!'}"-->
<!--    >-->
<!--    </portal-target>-->
<!--    <MountingPortal mountTo="#widget" name="source" append>-->
<!--      <p>Content for the Target</p>-->
<!--    </MountingPortal>-->
    <!--    :slot-props="test" 1对象，2必须使用slot-props3，父组件可以使用v-slot+template-->
    <!--    <router-view class="view one" name="main"></router-view>-->
    <!--    <router-view class="view two" name="TestA"></router-view>-->
    <!--    <router-view class="view three" name="TestB"></router-view>-->
    <!--    <router-view class="view four" name="TestC"></router-view>-->
    <!--    </transition>-->
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex';
import request from './api/request';
import Loading from './components/Loading';
import { showLoadingInterceptor } from './util/request';
import NoNetwork from './components/NoNetwork';
import { cookieSetting } from './util/help';

export default {
  name: 'App',
  // provide () {
  //   return {
  //     reload: this.reload
  //   }
  // },
  // created() {
  //   // this.monitorRequest()
  //   // showLoadingInterceptor(request,this.loadingStart,this.loadingEnd)
  // },
  components: {
    NoNetwork,
    Loading,
  },
  beforeRouteUpdate(to, from, next) {
    const toDepth = to.path.split('/').length;
    const fromDepth = from.path.split('/').length;
    this.transitionName = toDepth < fromDepth ? 'slide-right' : 'slide-left';
    next();
  },
  computed: {
    ...mapState({
      isShowLoading: (state) => state.request.isShowLoading,
      responseErrorStatus: (state) => state.request.responseErrorStatus,
    }),
  },
  // mounted: function () {
  //   // console.log(this.$route.params)
  // },
  data() {
    return {
      // isRouterAlive: true,
      // isShowLoading: false,
      // requestCount: 0,
      message: 'Vue的生命周期',
      transitionName: 'slide-left',
      test: {
        msg: 'Hello from the Target to You!',
        num: 10,
      },
    };
  },
  created() {
    // console.log('mounted')
    // this.countRequest()
    cookieSetting();
    // showLoadingInterceptor(request, this.countRequest, this.countResponse, this.responseError)
  },
  methods: {
    ...mapMutations([
      'countRequest',
      'countResponse',
      'responseError',
    ]),
    // monitorRequest() {
    //   this.isShowLoading = true
    //   this.getRequest()
    //   this.getResponse()
    // },
    // getRequest() {
    //   request.interceptors.request.use(this.getRequestResolve(), function (error) {
    //     return Promise.reject(error);
    //   });
    // },
    // getResponse() {
    //   request.interceptors.response.use(this.getResponseResolve(), function (error) {
    //     return Promise.reject(error);
    //   });
    // },
    // loadingStart() {
    //   console.log(this.requestCount + ' in')
    //   this.requestCount++
    //   this.isShowLoading = true
    // },
    // loadingEnd() {
    //   console.log(this.requestCount + ' out')
    //   if (this.requestCount > 0) {
    //     this.requestCount--
    //   }
    //   if (this.requestCount === 0) {
    //     this.isShowLoading = false
    //   }
    // }
    // reload() {
    //   this.isRouterAlive = false
    //   this.$nextTick(function () {
    //     this.isRouterAlive = true
    //   })
    // }
  },
  // beforeCreate: function() {
  //   console.group('------beforeCreate创建前状态------');
  //   console.log("%c%s", "color:red" , "el     : " + this.$el); //undefined
  //   console.log("%c%s", "color:red","data   : " + this.$data); //undefined
  //   console.log("%c%s", "color:red","message: " + this.message)
  //   // showLoadingInterceptor(request,this.loadingStart,this.loadingEnd)
  // },
  // created: function() {
  //   console.group('------created创建完毕状态------');
  //   console.log("%c%s", "color:red","el     : " + this.$el); //undefined
  //   console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化
  //   console.log("%c%s", "color:red","message: " + this.message); //已被初始化
  //   console.log(window.navigator)
  //
  // },
  // beforeMount: function() {
  //   console.group('------beforeMount挂载前状态------');
  //   console.log("%c%s", "color:red","el     : " + (this.$el)); //已被初始化
  //   console.log(this.$el);
  //   console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化
  //   console.log("%c%s", "color:red","message: " + this.message); //已被初始化
  // },
  // mounted: function() {
  //   console.group('------mounted 挂载结束状态------');
  //   console.log("%c%s", "color:red","el     : " + this.$el); //已被初始化
  //   console.log(this.$el);
  //   console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化
  //   console.log("%c%s", "color:red","message: " + this.message); //已被初始化
  // },
  // beforeUpdate: function () {
  //   console.group('beforeUpdate 更新前状态===============》');
  //   console.log("%c%s", "color:red","el     : " + this.$el);
  //   console.log(this.$el);
  //   console.log("%c%s", "color:red","data   : " + this.$data);
  //   console.log("%c%s", "color:red","message: " + this.message);
  // },
  // updated: function () {
  //   console.group('updated 更新完成状态===============》');
  //   console.log("%c%s", "color:red","el     : " + this.$el);
  //   console.log(this.$el);
  //   console.log("%c%s", "color:red","data   : " + this.$data);
  //   console.log("%c%s", "color:red","message: " + this.message);
  // },
  // beforeDestroy: function () {
  //   console.group('beforeDestroy 销毁前状态===============》');
  //   console.log("%c%s", "color:red","el     : " + this.$el);
  //   console.log(this.$el);
  //   console.log("%c%s", "color:red","data   : " + this.$data);
  //   console.log("%c%s", "color:red","message: " + this.message);
  // },
  // destroyed: function () {
  //   console.group('destroyed 销毁完成状态===============》');
  //   console.log("%c%s", "color:red","el     : " + this.$el);
  //   console.log(this.$el);
  //   console.log("%c%s", "color:red","data   : " + this.$data);
  //   console.log("%c%s", "color:red","message: " + this.message)
  // }
};
</script>
<!--<aside id="widget" class="widget-sidebar">-->
<!--  This Element is not controlled by our Vue-App,-->
<!--  but we can create a-->
<!--  <portal-target> here with-->
<!--    <MountingPortal>.-->
<!--</aside>-->

<style>
  * body {
    padding: 0;
    margin: 0;
    background: #F5F5F5;
    /*font-family: Monaco, Menlo, Consolas, "Courier New", "FontAwesome", monospace;*/
    font-size: 1em;
    box-sizing: border-box;
    font-family:Microsoft YaHei,Heiti SC,tahoma,arial,Hiragino Sans GB,"\5B8B\4F53",sans-serif
  }

  li{
    list-style: none;
  }
</style>
